<template>
    <div class="params">
        <el-card class="box-card">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>分类参数</el-breadcrumb-item>
            </el-breadcrumb>
            <el-alert title="注意:只允许为第三级分类设置参数" type="warning" show-icon :closable='false'></el-alert>
            <el-row style="margin-top:16px;">
                <span style="font-size:14px;margin-right:4px;">请选择商品分类</span>
                <el-cascader v-model="checkList" :options="options" :show-all-levels="false" :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name'}"></el-cascader>
            </el-row>
            <el-tabs :value="tabActived" @tab-click="handleClick">
                <el-tab-pane label="动态参数" name="many">
                    <el-button type="primary" size="mini" :disabled="btnStatus" @click="setParams.many=true">设置动态参数</el-button>
                    <el-table :data="manyTable" style="width: 100%" height="400px">
                        <el-table-column type="expand" width="40">
                            <template slot-scope="scope">
                                <el-tag :key="tag" v-for="tag in scope.row.attr_vals" closable
                                :disable-transitions="false"
                                @close="handleClose(tag,scope.row)">{{tag}}</el-tag>
                                <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
                                :ref="'saveTagInput'+scope.$index"
                                size="small"
                                style="width:528px"
                                @keyup.enter.native="handleInputConfirm(scope.row)"
                                @blur="handleInputConfirm(scope.row)"></el-input>
                                <el-button v-else class="button-new-tag" style="margin-left:5px" size="small" @click="showInput(scope.$index)">+ New Tag</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="#" width="40"></el-table-column>
                        <el-table-column label="属性名称" prop="attr_name" width="180"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" plain icon="el-icon-edit" @click="editManyParams(scope.row)"></el-button>
                                <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="removeParams(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态参数" name="only">
                    <el-button type="primary" size="mini" :disabled="btnStatus" @click="setParams.only=true">设置静态参数</el-button>
                    <el-table :data="onlyTable" style="width: 100%" height="400px">
                        <el-table-column type="index" label="#" width="40"></el-table-column>
                        <el-table-column label="属性名称" prop="attr_name" width="180"></el-table-column>
                        <el-table-column label="属性值" prop="attr_vals" width="180"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" plain icon="el-icon-edit" @click="editOnlyParams(scope.row)"></el-button>
                                <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="removeParams(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <el-dialog title="编辑属性" :visible.sync="editParams.many">
                <el-form :model="editManyForm">
                    <el-form-item 
                    prop="attr_name"
                    label="属性名称" 
                    label-width="100px">
                        <el-input v-model="editManyForm.attr_name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editParams.many=false">取 消</el-button>
                    <el-button type="primary" @click="submitManyParams">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="编辑静态参数" :visible.sync="editParams.only">
                <el-form :model="editOnlyForm">
                    <el-form-item prop="attr_name" label="属性名称" label-width="100px">
                        <el-input v-model="editOnlyForm.attr_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="attr_vals" label="属性值" label-width="100px">
                        <el-input v-model="editOnlyForm.attr_vals" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editParams.only=false">取 消</el-button>
                    <el-button type="primary" @click="submitOnlyParams">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="设置动态参数" :visible.sync="setParams.many">
                <el-form :model="setManyForm">
                    <el-form-item prop="attr_name" label="属性名称" label-width="100px">
                        <el-input v-model="setManyForm.attr_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="attr_sel" label="状态" label-width="100px">
                        <el-input v-model="setManyForm.attr_sel" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="attr_vals" label="状态参数" label-width="100px">
                        <el-input v-model="setManyForm.attr_vals" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="setParams.many=false">取 消</el-button>
                    <el-button type="primary" @click="setManyParams">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="设置静态参数" :visible.sync="setParams.only">
                <el-form :model="setOnlyForm" ref="setOnlyForm">
                    <el-form-item prop="attr_name" label="属性名称" label-width="100px">
                        <el-input v-model="setOnlyForm.attr_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="attr_sel" label="状态" label-width="100px">
                        <el-input v-model="setOnlyForm.attr_sel" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="attr_vals" label="属性值" label-width="100px">
                        <el-input v-model="setOnlyForm.attr_vals" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="setParams.only=false">取 消</el-button>
                    <el-button type="primary" @click="setOnlyParams">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import { categoriesList,getCatParamsList,addCatParams,setParams,removeParams } from '../../http/api'
export default {
    data() {
        return {
            options: [], //商品分类
            checkList: [], //选择商品分类
            btnStatus: true, //btn是否禁用
            tabActived: 'many', //tab默认选择
            manyTable: [], //动态
            onlyTable: [], //静态
            editParams: {many: false, only: false}, //编辑参数: 动态 静态
            editManyForm: {attr_id: '',attr_name: '',attr_sel: 'many',attr_vals: ''}, //编辑动态参数信息
            editOnlyForm: {attr_id: '',attr_name: '',attr_sel: 'only',attr_vals: ''}, //编辑静态参数信息
            setParams: {many: false, only: false}, //设置参数: 动态 静态
            setManyForm: {attr_name: '',attr_sel: 'many',attr_vals: ''},
            setOnlyForm: {attr_name: '',attr_sel: 'only',attr_vals: ''},
        }
    },
    methods:{
        categoriesList(){ //商品分类列表
            return categoriesList().then(res=>{
                this.options = res.data;
                console.log(res.data);
            })
        },
        async getCatParamsList(){ //参数列表
            const res = await getCatParamsList(this.checkList[this.checkList.length-1],this.tabActived);
            if (this.tabActived === 'many') {
                let arr = [];
                res.map(item=>{
                    item.inputVisible = false;
                    item.inputValue = '';
                    item.attr_vals = item.attr_vals.split(',');
                    arr.push(item);
                })
                this.manyTable = arr;
            }else{
                this.onlyTable = res;
            }
            return res;
        },
        handleClick(val) { //tab点击触发,获取参数状态
            this.tabActived = val.paneName;
        },
        async handleClose(tag,obj) { //删除标签
            const {attr_id,attr_name,attr_sel,attr_vals} = obj;
            const arr = JSON.parse(JSON.stringify(attr_vals));
            arr.splice(arr.indexOf(tag),1);
            const str = arr.join(',');
            const res = await addCatParams(this.checkList[2],attr_id,{
                attr_name,attr_sel,attr_vals: str
            });
            obj.attr_vals.splice(obj.attr_vals.indexOf(tag), 1);
        },
        showInput(index) { //点击添加标签按钮
            this.manyTable[index].inputVisible = true;
            this.$nextTick(_ => {
                this.$refs['saveTagInput'+index].$refs.input.focus();
            });
        },
        async handleInputConfirm(obj) { //添加标签
            let inputValue = obj.inputValue;
            if (inputValue) {
                const {attr_id,attr_name,attr_sel,attr_vals} = obj;
                const arr = JSON.parse(JSON.stringify(attr_vals));
                inputValue = inputValue.split(',')
                const arr1 = arr.concat(inputValue);
                arr1 = JSON.parse(JSON.stringify(arr1));
                const str = arr1.join(',');
                console.log(inputValue,str,arr1)
                const res = await addCatParams(this.checkList[2],attr_id,{
                    attr_name,attr_sel,attr_vals: str
                });
                obj.attr_vals.push(inputValue);
            }
            obj.inputVisible = false;
            obj.inputValue = '';
        },
        editManyParams(obj){ //编辑动态参数显示信息
            this.editParams.many=true;
            this.editManyForm.attr_name = obj.attr_name;
            this.editManyForm.attr_id = obj.attr_id;
            this.editManyForm.attr_sel = obj.attr_sel;
            this.editManyForm.attr_vals = obj.attr_vals;
        },
        async submitManyParams(){ //提交动态参数修改
            const {attr_id,attr_name,attr_sel,attr_vals} = this.editManyForm;
            const arr = JSON.parse(JSON.stringify(attr_vals));
            const str = arr.join(',');
            const res = await addCatParams(this.checkList[2],attr_id,{
                attr_name,attr_sel,attr_vals: str
            });
            this.editParams.many=false;
            this.getCatParamsList();
        },
        async removeParams(obj){ //删除动态或静态参数
            const {attr_id,attr_name,attr_sel,attr_vals} = obj;
            const res = await removeParams(this.checkList[2],attr_id);
            this.getCatParamsList();
        },
        editOnlyParams(obj){ //编辑静态参数显示信息
            this.editParams.only=true;
            this.editOnlyForm.attr_name = obj.attr_name;
            this.editOnlyForm.attr_id = obj.attr_id;
            this.editOnlyForm.attr_sel = obj.attr_sel;
            this.editOnlyForm.attr_vals = obj.attr_vals;
        },
        async submitOnlyParams(){ //提交静态参数修改
            const {attr_id,attr_name,attr_sel,attr_vals} = this.editOnlyForm;
            const res = await addCatParams(this.checkList[2],attr_id,{
                attr_name,attr_sel,attr_vals
            });
            this.editParams.only=false;
            this.getCatParamsList();
        },
        async setManyParams(){ //设置动态参数
            const {attr_name,attr_sel,attr_vals} = this.setManyForm;
            const res = await setParams(this.checkList[2],{
                attr_name,attr_sel,attr_vals
            });
            this.setParams.many=false;
            this.getCatParamsList();
            this.setManyForm.attr_name = ''
            this.setManyForm.attr_vals = ''
        },
        async setOnlyParams(){ //设置静态参数
            const {attr_name,attr_sel,attr_vals} = this.setOnlyForm;
            const res = await setParams(this.checkList[2],{
                attr_name,attr_sel,attr_vals
            });
            this.setParams.only=false;
            this.getCatParamsList();
            this.setOnlyForm.attr_name = ''
            this.setOnlyForm.attr_vals = ''
        }
    },
    watch:{
        'checkList':{ //监听选择的分类
            deep: true,
            async handler(val){
                if (val.length>=3) {
                    this.btnStatus = false;
                    const res = await this.getCatParamsList();
                    console.log(res);
                }else{
                    this.$message({
                        type: 'warning',
                        message: '请选择三级分类'
                    })
                    this.btnStatus = true;
                }
            }
        },
        async 'tabActived'(val){ //监听是否选择分类
            if (this.checkList.length>=3) {
                this.btnStatus = false;
                const res = await this.getCatParamsList();
            }else{
                this.$message({
                    type: 'warning',
                    message: '请选择三级分类'
                })
                this.btnStatus = true;
            }
        }
    },
    created(){
        this.categoriesList();
    }
}
</script>
<style lang="scss" scoped>
.params {
    height: 100%;
    .box-card{
        width: 100%;
        height: 100%;
    } 
}     
</style>